<script setup>
import { useObject } from "#imports";
import { ref } from "vue";
const { data: obj } = await useObject({
  eventlog_id: true,
  class: true,
  id: true,
  action: true,
  created_time: true,
  username: true,
  source: true,
  target: true,
  different: true
});
const splitterModel = ref(50);
</script>

<template>
    <l-page>
        <l-card>
            <l-list>
                <l-item label="EventLog ID">{{ obj.eventlog_id }}</l-item>
                <l-item label="Class">{{ obj.class }}</l-item>
                <l-item label="ID">{{ obj.id }}</l-item>
                <l-item label="Action">{{ obj.action }}</l-item>
                <l-item label="Created time">{{ obj.created_time }}</l-item>
                <l-item label="Username">{{ obj.username }}</l-item>

            </l-list>

            <q-splitter v-model="splitterModel">
                <template v-slot:before>
                    <div class="q-pa-md">
                        <div class="text-h6 q-mb-md">{{ $t('Source') }}</div>
                        <pre>{{ obj.source }}</pre>
                    </div>
                </template>

                <template v-slot:after>
                    <div class="q-pa-md">
                        <div class="text-h6 q-mb-md">{{ $t('Target') }}</div>
                        <pre>{{ obj.target }}</pre>
                    </div>
                </template>
            </q-splitter>

            <q-separator />
            <div class="q-pa-md" style="overflow: auto;">
                <div class="text-h6 q-mb-md">{{ $t('Different') }}</div>
                <pre v-if="obj.different">{{ obj.different }}</pre>
            </div>
        </l-card>

    </l-page>
</template>
